<html>
    <head>
        <title>异步更新队列</title>
    </head>
    <body>
        <script>
            // 四、异步更新队列
                            /*
                                可能你还没有注意到，Vue在更新DOM时是"异步执行的"。
                                只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一时间循环中的所有数据变更。
                                如果同一个 watcher 被多次触发，只会推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作时非常重要的。
                                然后，在下一个的事件"tick"中，Vue刷新队列并执行实际工作。
                                Vue在内部队列尝试使用原生的 Promise.then 、MutationObserver  和 setImmediate ，
                                如果执行环境不支持，则会采用 setTimeout(fn,0)代替。

                                例如，当你设置 vm.someData = 'new value' ,该组件不会立即重新渲染。
                                当刷新队列时，组件会在下一个事件循环'tick'中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的DOM状态来做点什么，
                                这就可能会有些棘手。
                                虽然Vue通常鼓励开发者使用"数据驱动"的方式思考，避免直接操作ＤＯＭ，但是有时我们必须这么做。
                            */

                            //  为了在数据变化之后等待Vue完成更新DOM，可以在数据变化之后使用该 Vue.nextTick(callback).这样回调函数将在DOM更新完成后被调用。
                            //  例如：
                            var vm = new Vue({
                                         el:'#example',
                                         data:{
                                            message:'123'
                                         }
                                       })

                                       vm.message = 'new message';// 更改响应式数据
                                       vm.$el.textContent==='new message'; // 此时表达式值为： false
                                       Vue.nextTick(function(){  // 下一个DOM更新队列执行完毕时执行回调
                                            vm.$el.textContent ==='new message'; // 此时表达式值为： true
                                       })

                            /*
                                在组件内使用 vm.$nextTIck() 实例方法特别方便，因为它不需要全局Vue,并且回调函数中的 this 将自动绑定到当前的Vue实例上。
                            */
                                       Vue.component('example',{
                                          template:'<span>{{message}}</span>',
                                          data:function(){
                                            return {
                                                message:'未更新'
                                            }
                                          },
                                          methods:{
                                            updateMessage:function(){
                                                this.message= '已更新'
                                                console.log(this.$el.textContent) // =>'未更新'
                                                this.$nextTick(function(){
                                                    console.log(this.$el.textContent) // => '已更新'
                                                });
                                            }
                                          }
                                       })
        </script>
    </body>
</html>